import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { CommentOutlined, HeartOutlined, EditOutlined, FormOutlined, MessageOutlined } from '@ant-design/icons';
import UserBrifeInfo from '../../component/UserBriefInfo';
import './index.less';

export default function PersonalCenter() {
    return (
        <>
            <div className="personal-center">
                <div className="personal-center-left">
                    <UserBrifeInfo />
                </div>
                <div className="personal-center-right">
                    <div className="personal-center-nav">
                        <ul>
                            <li>
                                <NavLink to="myEvaluate">
                                    <CommentOutlined />
                                    <span>我的评教</span>
                                </NavLink>
                            </li>
                            <li>
                                <NavLink to="myCollect">
                                    <HeartOutlined />
                                    <span>我的收藏</span>
                                </NavLink>
                            </li>
                            <li>
                                <NavLink to="myDraft">
                                    <EditOutlined />
                                    <span>我的草稿</span>
                                </NavLink>
                            </li>
                            <li>
                                <NavLink to="editInfo">
                                    <FormOutlined />
                                    <span>编辑资料</span>
                                </NavLink>
                            </li>
                            <li>
                                <NavLink to="myMessage">
                                    <MessageOutlined />
                                    <span>我的消息</span>
                                </NavLink>
                            </li>
                        </ul>
                    </div>
                    <div className="personal-center-content">
                        <Outlet></Outlet>
                    </div>
                </div>
            </div>
        </>
    );
}
